<template>
  <CustomNav title="客片详情"></CustomNav>
  <view class="container">
    <!-- 原生版 -->
    <!-- 轮播图 -->
    <view class="banner">
      <swiper
        indicator-dots
        indicator-color="#fff"
        indicator-active-color="#ccc"
        circular
        autoplay
        interval="4000"
      >
        <swiper-item
          v-for="(item, index) in guestFilmDetailsData.imgs"
          :key="index"
        >
          <image mode="aspectFill" :show-loading="true" :src="item"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 信息 -->
    <view class="info">
      <view class="name">{{ guestFilmDetailsData.title }}</view>
      <view class="love">
        <i class="iconfont icon-guanzhu-zhihui"></i>
        <view class="num">{{ guestFilmDetailsData.title }}</view>
      </view>
    </view>

    <view class="imgList">
      <image
        v-for="(item, index) in guestFilmDetailsData.imgs"
        :key="index"
        mode="widthFix"
        :show-loading="true"
        :src="item"
      ></image>
    </view>
  </view>

  <!-- 点赞按钮 -->
  <!-- <view class="consultButton" @click="clickLove">
    <view class="box">
      <i
        class="iconfont icon-guanzhu-zhihui"
        :class="{ loveActive: ststus }"
      ></i>
      <view class="text">点赞</view>
    </view>
  </view> -->
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import { guestFilmDetails } from "@/api/guestFilm";

// 详情数据
const guestFilmDetailsData = ref({});

const ststus = ref(false);

onMounted(async () => {
  const routes = getCurrentPages(); // 获取当前打开的页面路由数组

  console.log("routes:", routes[routes.length - 1].options.id);

  const result = await guestFilmDetails(routes[routes.length - 1].options.id);

  console.log("result:", result);

  guestFilmDetailsData.value = result.data.data;
});
// 模拟点赞
const clickLove = () => {
  console.log("按时");
  ststus.value = !ststus.value;

  console.log("ststus:", ststus.value);
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  // 轮播图
  .banner {
    width: 100%;
    height: 550rpx;
    // margin-top: 30rpx;

    swiper {
      height: 100%;
      width: 100%;
    }

    image {
      width: 100%;
      height: 550rpx;
    }
  }

  .info {
    padding: 40rpx 25rpx 20rpx 35rpx;

    .name {
      color: $btn;
      font-size: 34rpx;
    }

    .love {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 50rpx;

      .iconfont {
        color: $btn;
        font-size: 40rpx;
        margin-right: 10rpx;
      }

      .num {
        font-size: 28rpx;
      }
    }
  }

  .imgList {
    image {
      width: 750rpx;
    }
  }
}

.consultButton {
  position: fixed;
  z-index: 1;
  height: 90rpx;
  width: 90rpx;
  border-radius: 50%;
  border: none;
  background: #ffb61e;
  right: 15px;
  bottom: 40px;

  .box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .iconfont {
      color: #fff;
      font-size: 40rpx;
    }

    .text {
      font-size: 14rpx;
      color: #fff;
    }
  }

  .loveActive {
    color: red !important;
  }
}
</style>
